<template>
	<view>
		<view class="searchBg">
			<view class="search">
				<u-search 
				placeholder="请输入学习测验试题名称" 
				v-model="keyword" 
				bgColor="#fff"
				:clearabled="false" 
				:showAction="false"
				@change="search"
				></u-search>
			</view>
		</view>
		
		<view class="tab">
			<u-sticky bgColor="#fff">
				<u-tabs 
				:list="subjectList" 
				lineColor="#12B9A3"
				keyName="subjectName"
				@click="clickTabs()"
				></u-tabs>
			</u-sticky>
		</view>
		
		 
		<view class="list" v-if="examList.length > 0">
		 	 <view class="list_item" v-for="(item, index) in examList" :key="item.id" @click="clickItem(item)">
						<text class="list_item_name">{{item.examName}}</text>
						<text class="list_item_num">共{{item.questionsNumber}}题 ></text>
		 	 </view>
			 <u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
		 </view>
		<u-empty v-if="examList.length == 0" mode="list" marginTop="40upx"></u-empty>
		
		<tabbar :tab="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import * as courseApi from '@/common/apis/course-api.js';
	import * as practiceApi from '@/common/apis/practicetest-api.js';
  export default {
		components: {
			tabbar
		},
		data() {
			return {
				keyword: '',
				examList: [],
				subjectList: [],
				pageNum: 1,
				loadingStatus: 'loading',
				subjectId: '1',//科目id
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.getExamList();
		},
		
		onReachBottom() {
			this.getExamList();
			this.loadingStatus = 'loading';
		},
		 onLoad() {
			this.pageNum = 1;
		    this.getSubjectList();
			uni.$on('refreshTestListData', ()=> {
				this.pageNum = 1;
				this.getExamList();
			})
		},
		methods: {
			async getSubjectList() {
				courseApi.subjectList().then(res => {
					this.subjectList = res;
				  var obj = this.subjectList[0];
					this.subjectId = obj.id;
					// setTimeout(() => {this.getExamList()}, 2000)
					this.getExamList();
				});
			},
			
			async getExamList() {
				practiceApi.examList({
					subjectId : this.subjectId,
					examType : 2,
					examName : this.keyword,
					pageNum : this.pageNum,
					pageSize : 10
				}).then(res => {
					if(this.pageNum == 1) {
						this.examList = [];
						this.pageNum++;
						// this.loadingStatus = 'loadmore';
						this.loadingStatus = 'nomore';
					}else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNum++;
							this.loadingStatus = 'loadmore';
						} else {
							this.loadingStatus = 'nomore';
						}
					}
					
					if (!uni.$u.test.isEmpty(res)) {
						this.examList = res;
						// this.examList = this.examList.concat(res);
					}
				})
			},
			
			clickloadmore() {
				this.getExamList();
				this.loadingStatus = 'loading';
			},
			
			clickTabs(item) {
				this.subjectId = item.id;
				this.pageNum = 1;
			  this.getExamList();
			},
			
			clickItem(item) {
				let completeStatus = item.completeStatus;
				if(completeStatus == 1) {//已完成
					uni.navigateTo({
						url: './test-finish?id=' + item.id + '&examName='+item.examName
					})
				}else {//未完成
				   uni.navigateTo({
				   	url: './test-detail?id=' + item.id + '&examName='+item.examName
				   })
				}
			},
			
			//搜索
			search() {
				this.pageNum = 1;
				this.getExamList();
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>
	
	.searchBg {
	  background-color: #12B9A3;
		width: 100%;
		height: 140upx;
		display: flex;
		justify-content: center;
		align-items: center;
	
	}
	
	.search {
		margin-left: 25upx;
		margin-right: 25upx;
		width: 85%;
	}

.list {
	padding: 20upx 35upx;
	&_item {
		padding: 35upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
    border-radius: 16upx;
    box-shadow: 0 0 68u 0 rgba(69,69,69,0.13); 
		margin-bottom: 20upx;
		&_name {
			font-size: 30upx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: bold;
			text-align: left;
			color: #333333;
		}
		
		&_num {
			font-size: 26upx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: bold;
			text-align: left;
			color: #999999;
		}
	}
}
</style>

